<template>
    <div
        v-show="globalVariable.isCoilIn"
        class="DefaultPageItem"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <div class="box-group businessIndex">
            <p class="title">客户基本信息</p>
            <div class="content">
                <el-row>
                    <el-col :span="8">
                        <p>
                            <span>姓名:</span>
                            {{customerInfo_3002.CHINAME}}({{customerInfo_3002.GENDER|isGender}})
                        </p>
                        <p>
                            <span>证件类型:</span>
                            {{customerInfo_3002.KEYTYPE|filterKetype(idtype)}}
                        </p>
                    </el-col>
                    <el-col :span="8">
                        <p>
                            <span>英文名字:</span>
                            {{customerInfo_3002.ENGNAME}}
                        </p>

                        <p>
                            <span>证件号:</span>
                            {{customerInfo_3002.CUSTID}}
                        </p>
                    </el-col>
                    <el-col :span="8">
                        <p>
                            <span>手机号:</span>
                            {{customerInfo_3002.MOBILEPHONE}}
                        </p>
                        <p>
                            <span>出生日期:</span>
                            {{customerInfo_3002.BIRTHDAY|filterData}}
                        </p>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <p>
                            <span>账单寄送方式:</span>
                            {{CreditCardService_3014.STMCODE|getstmttype(CARDTOList)}}
                        </p>
                        <p>
                            <span>查询密码:</span>
                            {{customerInfo_3002.PINSET|filterPinset}}
                        </p>
                    </el-col>
                    <el-col :span="8">
                        <p>
                            <span>邮箱地址:</span>
                            {{customerInfo_3002.EMAIL}}
                        </p>
                        <p>
                            <span>家庭电话:</span>
                            {{customerInfo_3002.HOMEPHONE}}
                        </p>
                    </el-col>
                    <el-col :span="8">
                        <p>
                            <span>单位名称:</span>
                            {{customerInfo_3002.BUSINAME}}
                        </p>
                        <p>
                            <span>单位电话:</span>
                            {{customerInfo_3002.BUSIPHONE}}({{customerInfo_3002.BUSIEXT}})
                        </p>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="box-group businessIndex">
            <p class="title">账户信息（{{cardInfo_3004.CATEGORY|getaccouttype(AccountionTYPE_INFO)}})</p>
            <div class="content">
                <el-row>
                    <el-col :span="7">
                        <p>
                            <span>账户状态:</span>
                            {{cardAccountInfo_3001.CARDSTAT|filterCardstat(cardstatList)}}
                        </p>
                        <p>
                            <span>信用额度:</span>
                            {{cardAccountInfo_3001.CREDITLIMIT}}
                        </p>
                        <p>
                            <span>自扣还款方式:</span>
                            {{AutoRepayAcct_4017.REPAYCODE | PAYFALG_filter(REPAYCODE_DICT)}}
                        </p>
                    </el-col>
                    <el-col :span="7">
                        <p>
                            <span>账单日:</span>
                            <span
                                v-if="ifupdated"
                                style="color:red;text-align: left;"
                            >{{cardAccountInfo_3001.CYCLNBR}}日</span>
                            <span v-else style="text-align: left;">{{cardAccountInfo_3001.CYCLNBR}}日</span>
                        </p>
                        <p>
                            <span>预借现金额度:</span>
                            {{cardAccountInfo_3001.CALIMIT}}
                        </p>
                        <p>
                            <span>自扣还款账号:</span>
                            {{AutoRepayAcct_4017.ACCT}}
                        </p>
                    </el-col>
                    <el-col :span="10">
                        <p>
                            <span>账户信用历史:</span>
                            <span
                                style="font-size:13px"
                            >{{CreditCardHistory_3054.CUPAYM24|getNewCUPAYM24}}</span>
                        </p>
                        <p>
                            <span>大额分期额度:</span>
                            {{cardAccountInfo_3001.LMPLIMIT}}
                        </p>
                        <p>
                            <span>自扣还款状态:</span>
                            {{AutoRepayAcct_4017.STATUS | STATUS_filter(AutoRepayAcct_4017.ACCT)}}
                        </p>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
import { getDictMappingValue, getDictSelectList, isNull } from '@/utils/Common';
import { isEmptyObject } from '@/utils/Object';

export default {
    name: 'DefaultPageItem',
    data() {
        return {
            SMSYNValue: '', // 短信功能
            pageLoading: true,
            REPAYCODE_filter: '', // 人民币扣款方式
            // CUPAYM24_Value:'',
            // creditCard_3014:'',
            CARDTOList: '', // 3014
            // isCard3054:'',
            cardstatList: [],
            pageLoading: true,
            // Limit4001:'',
            RtnindFlag: '',//翻页标志
            NEXTDAY_3077: '20000101',//翻页交易日期
            NEXTMPNO_3077: '0',//翻页分期付款序号
            pagingDataList: '',//// 翻页上送字段列表
            InstallmentInfo_3077: [],//3077分期付款交易明细查询
            REPAYCODE_DICT: [],
            idtype: [],
            ifupdated: false,//两个月内是否修改过账单日
        };
    },
    computed: {
        ...mapGetters([
            'defaultParams', // 默认请求报文
            'customerInfo_3002', // 客户信息 3002
            'cardAccountInfo_3001', // 3001按卡号查询卡账户资料信息
            'cardInfo_3004',
            'CreditCardService_3014',
            'CreditCardHistory_3054',
            'AccountionTYPE_INFO',
            'CardBill_3005',
            'pinFlag',//是否严密标志
            'AutoRepayAcct_4017',
            'globalVariable',//是否进线
        ]),
        defaultParam() {
            return this.defaultParams;
        },
    },
    watch: {
        cardAccountInfo_3001(newValue, oldValue) {
            if (!isEmptyObject(newValue)) {
                if (newValue.CARDNO !== oldValue.CARDNO) {
                    this.getasyncFun();
                }
            }
        },
    },
    filters: {
        isGender: (value) => {
            const val = (`${value}`).trim();
            if (val === 'M') {
                return '男';
            } if (val === 'F') {
                return '女';
            }
            return val;
        },
        filterData: (value) => {
            if (value) {
                return moment(`${value}`, 'YYYYMMDD').format('YYYY-MM-DD');
            }
            return '';
        },
        filterDataYYMM: (value) => {
            if (value) {
                return moment(`${value}`, 'YYMM').format('YY-MM');
            }
            return '';
        },
        filterPinset: (value) => {
            value = (`${value}`).trim();
            if (value === '0') {
                return '未设置';
            } if (value === '1') {
                return '已设置';
            }
        },
        filterKetype: (value, idtype) => {
            value = (`${value}`).trim();
            for (let index = 0; index < idtype.length; index++) {
                const element = idtype[index];
                if (element.code === value) {
                    return element.label;
                }
            }
        },
        OPTION_filter: (value) => {
            value = (`${value}`).trim();
            if (value === 'L') {
                return '第一币种';
            } if (value === 'I') {
                return '第二币种';
            }
        },
        PAYFALG_filter: (value, REPAYCODE_DICT) => {
            let newVal = (`${value}`).trim();
            if (newVal === '' || newVal === 'undefined') {
                return '';
            }
            REPAYCODE_DICT.forEach((item) => {
                if (newVal === item.code) {
                    newVal = item.label;
                }
            });
            return newVal;
        },
        STATUS_filter: (value, acct) => {
            value = (`${value}`).trim();
            acct = (`${acct}`).trim();
            if (acct === '' || acct === 'undefined' || value === '' || value === 'undefined') {
                return '';
            } else {
                switch (value) {
                    case '00':
                        return '委托关系成功';
                        break;
                    case 'AA':
                        return '关系待验证';
                        break;
                    default:
                        return '失败';
                        break;
                }
            }
        },
        getaccouttype: (value, AccountionTYPE_INFO) => {
            value = (`${value}`).trim();
            for (let index = 0; index < AccountionTYPE_INFO.length; index++) {
                const element = AccountionTYPE_INFO[index];
                if (element.code === value) {
                    return element.label;
                }
            }
        },
        getstmttype: (value, CARDTOList) => {
            value = (`${value}`).trim();
            for (let index = 0; index < CARDTOList.length; index++) {
                const element = CARDTOList[index];
                if (element.code === value) {
                    return element.label;
                }
            }
        },
        filterCardstat: (value, cardstatList) => {
            value = (`${value}`).trim();
            let txt = '';

            for (let index = 0; index < cardstatList.length; index++) {
                const element = cardstatList[index];
                if (element.code === value) {
                    txt = element.label;
                }
            }
            if (value === '') {
                txt = '正常';
            }
            return txt;
        },
        getNewCUPAYM24: (cupaym24) => {
            let result = '';
            const rgx = /^\d+$/;
            if (!isNull(cupaym24)) {
                if (cupaym24.trim() != '') {
                    for (let i = 0; i < cupaym24.length; i++) {
                        let item = cupaym24.substring(i, i + 1);
                        if (item === '*') { //星号不翻译
                            result = item + result;
                        } else if (item === '0') { //星号不翻译
                            result = '*' + result;
                        } else {
                            if (rgx.test(item)) {//数字翻译为N-表示没有逾期
                                result = 'N' + result;
                            } else {
                                if (item + '' === 'A') {
                                    result = '1' + result;
                                } else if (item + '' === 'B') {
                                    result = '2' + result;
                                } else if (item + '' === 'C') {
                                    result = '3' + result;
                                } else if (item + '' === 'D') {
                                    result = '4' + result;
                                } else if (item + '' === 'E') {
                                    result = '5' + result;
                                } else if (item + '' === 'F') {
                                    result = '6' + result;
                                } else {
                                    result = '7' + result;
                                }
                            }
                        }
                    }
                }
            }
            return result;
        }
    },
    async mounted() {
        this.getasyncFun();
        this.getFQFK3077();
        this.REPAYCODE_DICT = await getDictSelectList('REPAYCODE', this);
    },
    methods: {
        //  执行 异步
        // async getstateFunc(){
        //   await this.getasyncFun();
        // },
        // 异步查询字段值
        async getasyncFun() {
            console.log("CreditCardService_3014", this.CreditCardService_3014);
            let CHGDY = this.CreditCardService_3014.CHGDY;
            let twoMonth = moment(new Date(new Date().getTime() - (1000 * 60 * 60 * 24 * 60))).format('YYYYMMDD');
            if (parseInt(CHGDY) > parseInt(twoMonth)) {
                this.ifupdated = true;
            } else {
                this.ifupdated = false;
            }
            console.log("this.ifupdated", this.ifupdated);
            this.idtype = await getDictSelectList('IDTYPE', this);
            this.cardstatList = await getDictSelectList('CLOCD', this);

            // 短信功能
            //this.SMSYNValue = await getDictMappingValue('SMSYN', this.cardAccountInfo_3001.SMSYN, this);
            // //人民币扣款方式
            if (!isEmptyObject(this.cardAccountInfo_3001)) {
                this.REPAYCODE_filter = await getDictMappingValue('REPAYCODE', this.cardAccountInfo_3001.REPAYCODE, this);
            }
            // await this.getCardHistory3054();
            // await this.getCreditCardInfo3014();
            this.CARDTOList = await getDictSelectList('STMCD', this);
            // stmdc_value = (`${stmdc_value}`).trim();
            // if (!stmdc_value) {
            //     this.CARDTO_Value = '无任何账单寄送方式';
            // } else {
            //     this.CARDTO_Value = stmdc_value;
            // }
            this.pageLoading = false;

        },
        // 3077分期付款交易明细查询
        getFQFK3077() {
            const appBody = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                // 空或Z：全部  A：灵活分期 C：信用计划分期 B：余额转移 H：银联POS分期 L：大额分期 M：邮购分期  P：自行POS分期 S：深圳银联POS分期 Y：余额/账单分期 D：自动分期
                MPTYPE: '', // 分期付款类型
                OPERCODE: 0, // 操作代码  0全部返回  1可提前还款的分期交易    2可撤销的分期交易
                OPT: 1, // 查询方式 1-用卡号查询 2-用证件号码查询
                //CATE: this.accountType, // 账户类别 查询方式为2时，必填
                PINFLAG: this.pinFlag, // 是否检查密码标志
                BEGDAY: "20000101", // 起始日期
                ENDDAY: moment(new Date()).format('YYYYMMDD'), // 结束日期 两个月 内的
                RTNIND: this.RtnindFlag,// 翻页标志 首次传空， 翻页传1
                NEXTDAY: this.NEXTDAY_3077,// 首次查询时送查询起始日期， 下翻页查询时上送上次查询结果的最后一条记录返回的分期付款交易日期
                NEXTMPNO: this.NEXTMPNO_3077,// 首次查询时送起始序号，默认为0 下翻页查询时上送上次查询结果的最后一条记录返回的交易序号
            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '3077';
            defaultParams.body.appBody = appBody;
            // 3077交易
            this.$post.common.transPort(defaultParams).then((res) => {
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    if (result.sysHead.rspCd === '000000') {
                        this.InstallmentInfo_3077.push(...result.body.appBody.dataList);

                        if (result.body.appBody.RTNIND === '1') {
                            this.NEXTDAY_3077 = result.body.appBody.dataList[result.body.appBody.dataList.length - 1].BEGYM;
                            this.NEXTMPNO_3077 = result.body.appBody.dataList[result.body.appBody.dataList.length - 1].MPNO;
                            // 修改翻页标志 
                            this.RtnindFlag = result.body.appBody.RTNIND;
                            this.getFQFK3077();
                        } else {
                            console.log('this.InstallmentInfo_3077', this.InstallmentInfo_3077);
                            this.$store.commit('common/UPDATE_CARD_INSTALLMENT_INFO', this.InstallmentInfo_3077);
                        }
                    }
                }
            });
        },


    },
};
</script>

<style lang='scss' >
.DefaultPageItem {
    margin: 20px 16px 30px;
    .content {
        margin-top: 10px;
    }
    .content_bottom {
        margin-top: 20px;
    }
    .box-group .content p {
        color: #4e4d4d;
        font-size: 14px;
        text-align: left;
        line-height: 36px;
        span {
            color: #000;
            text-align: right;
            display: inline-block;
            min-width: 110px;
            width: 31%;
            margin-right: 4px;
        }
    }

    .box-group .title {
        font-size: 14px;
    }
}
</style>
